<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            用户完成问卷详情
          </div>
          <div class="publicTable toLongTable">
            <div class="main-returns">
              <i class="el-icon-arrow-left" @click="returns()"></i>
              <span @click="returns()">返回</span>
            </div>
            <div class="user-infos clear">
              <div class="fl user-infos-l">
                用户账号：{{details.user_phone}}
              </div>
              <div class="fl user-infos-l">
                用户实名：{{details.user_name}}
              </div>
            </div>
            <div class="user-infos clear">
              <div class="fl user-infos-l">
                完成的问卷名称：{{details.title}}
              </div>
              <div class="fl user-infos-l">
                问卷分数：{{details.user_score}}分
              </div>
              <div class="fl user-infos-l">
                所得积分：{{details.point}}分
              </div>
            </div>
            <div class="user-infos clear">
              <div class="fl user-infos-l">
                问卷所属项目：{{details.project}}
              </div>
              <div class="fl user-infos-l">
                问卷对应任务单元：{{details.project_item}}
              </div>
            </div>
            <div class="questions-details">
              <div class="questions-details-top">问卷对错实况
                <span v-if="details.type==2">（问卷调研）</span>
                <span v-if="details.type==1">（问卷问答）</span>
              </div>
              <div class="questions-details-list">
                <ul v-if="details.type==1">
                  <li v-for="(item,index) in questionList" :key="index">
                    <div class="questions-details-title">
                      <i class="el-icon-circle-check" v-if="item.is_right==1"></i>
                      <span>{{index+1}} {{item.subject}}</span>
                    </div>
                    <div class="questions-details-lists" v-for="(question,optionIndex) in item.option" :key="optionIndex">
                      <el-radio :value='question.is_select' :label="1">{{question.content}}</el-radio>
                    </div>
                    <div class="questions-details-lists-error" v-if="item.is_right==0">
                      <div v-for="(question,optionIndex) in item.option" :key="optionIndex">
                        <span v-if="question.is_right==1">正确选择为：{{question.content}}</span>
                      </div>

                    </div>
                  </li>
                </ul>
                <ul v-if="details.type==2">
                  <li v-for="(item,index) in questionList" :key="index">
                    <div class="questions-details-title">
                      <span>{{index+1}} {{item.subject}}</span>
                    </div>
                    <div class="questions-details-lists" v-for="(question,optionIndex) in item.option" :key="optionIndex">
                      ({{optionIndex +1 }}) {{question.content}}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import questionnaire from "@/api/questionnaire";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "questionnaire",
      id: this.$route.query.id,
      details: "",
      questionList: []
    };
  },
  methods: {
    returns() {
      history.go(-1);
    },
    hideSystemPopup() {
      this.search = false;
    },
    getDetails() {
      this.showNodataTip = false;
      const options = {
        id: this.id
      };
      questionnaire.answerDetails(options).then(res => {
        if (res.code == 1) {
          this.details = res.data;
          this.questionList = res.data.quesion;
        }
      });
    }
  },
  mounted() {
    this.getDetails();
  }
};
</script>

<style>
</style>
